import React, { useEffect, useRef } from 'react';
import {
  Box,
  Button,
  CircularProgress,
  Typography,
} from '@mui/material';
import { ExpandMore } from '@mui/icons-material';

interface LoadMoreProps {
  hasMore: boolean;
  loading: boolean;
  onLoadMore: () => void;
  autoLoad?: boolean; // 是否自动加载（滚动到底部时）
  error?: string | null;
}

const LoadMore: React.FC<LoadMoreProps> = ({
  hasMore,
  loading,
  onLoadMore,
  autoLoad = true,
  error = null,
}) => {
  const loadMoreRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!autoLoad || !hasMore || loading) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          onLoadMore();
        }
      },
      {
        threshold: 0.1,
        rootMargin: '100px', // 提前100px开始加载
      }
    );

    const currentRef = loadMoreRef.current;
    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, [autoLoad, hasMore, loading, onLoadMore]);

  // 如果没有更多内容且不在加载中，不显示组件
  if (!hasMore && !loading) {
    return (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          py: 4,
        }}
      >
        <Typography variant="body2" color="text.secondary">
          已加载全部内容
        </Typography>
      </Box>
    );
  }

  // 错误状态
  if (error) {
    return (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          py: 4,
          gap: 2,
        }}
      >
        <Typography variant="body2" color="error">
          {error}
        </Typography>
        <Button
          variant="outlined"
          onClick={onLoadMore}
          disabled={loading}
          size="small"
        >
          重试
        </Button>
      </Box>
    );
  }

  // 加载状态
  if (loading) {
    return (
      <Box
        ref={loadMoreRef}
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          py: 4,
          gap: 2,
        }}
      >
        <CircularProgress size={24} />
        <Typography variant="body2" color="text.secondary">
          加载更多内容中...
        </Typography>
      </Box>
    );
  }

  // 手动加载更多按钮
  if (!autoLoad && hasMore) {
    return (
      <Box
        ref={loadMoreRef}
        sx={{
          display: 'flex',
          justifyContent: 'center',
          py: 4,
        }}
      >
        <Button
          variant="outlined"
          onClick={onLoadMore}
          disabled={loading}
          startIcon={<ExpandMore />}
          sx={{
            borderRadius: 2,
            textTransform: 'none',
            px: 4,
            py: 1.5,
          }}
        >
          加载更多
        </Button>
      </Box>
    );
  }

  // 自动加载的触发区域
  return (
    <Box
      ref={loadMoreRef}
      sx={{
        height: 1, // 很小的高度，用作触发区域
        visibility: 'hidden',
      }}
    />
  );
};

export default LoadMore; 